<template>
  <div class="full grey-bg">
    <div class="group-item">
      <div class="group-label info-top weui-flex text-white">
        <!-- <div class="weui-flex__item" @click="toggleEdit">
          <img v-show="myGroupInfo.crowdHead" class="label-img" :src="myGroupInfo.crowdHead" alt="请上传俱乐部头像">
          <img v-show="!myGroupInfo.crowdHead" class="label-img" src="img/playerGroup/group-default-head.jpg" alt="请上传俱乐部头像">
        </div> -->
        <!-- <div class="weui-flex__item_3 info mt-5" @click="toggleEdit">
          <div>
            <span class="pull-left">代理追溯: </span>{{myGroupInfo.crowdName}}
          </div>
          <div>
            <span class="pull-left">代理追溯: </span>{{myGroupInfo.notice}}
          </div>
        </div> -->
        <!-- <router-link tag="div" :to="{name: 'groupGameRecord'}" class="weui-flex__item"> -->
            <div class="weui-flex__item">
          <div class="info-top-grid mt-8">
            <img src="img/diamonds.png" class="img-icon" alt="">
          </div>
          <p class="weui-grid__label" style="margin: 0;">
             钻石余额({{showHeadList.amount}})
          </p>
            </div>
        <!-- </router-link> -->
        <!-- <router-link tag="div" :to="{name: 'groupGameRecord'}" class="weui-flex__item"> -->
          <div class="weui-flex__item">
          <div class="info-top-grid mt-8">
            <img src="img/jgCount.png" class="img-icon" alt="">
          </div>
          <p class="weui-grid__label" style="margin: 0;">
            上月总计({{showHeadList.salesCount}})
          </p>
          </div>
        <!-- </router-link> -->
      </div>
    </div>

 <div ref="list" >
       <div class="weui-cell weui-flex list-title" style="padding-left:2px;padding-right: 2px;">
      <div class="weui-flex__item" v-for="(t, index) in listTitle" :key="index">{{t}}</div>
    </div>

     <div class="weui-cell weui-flex" v-for="(source, index) in listData" :key="index" style="padding:2px;">
      <div class="weui-flex__item">
        <img class="list-user-img" :src="source.headUrl" alt="" style="width: 40px;height: 40px;">
      </div>
      <div class="weui-flex__item">
        <p class="nickname-text">{{source.nickname}}</p>
        <p style="font-size:14px;">{{source.lftid}}</p>
      </div>
     <div class="weui-flex__item">
        <p style="font-size:14px;">{{source.superUid}}</p>
      </div>
      <div class="weui-flex__item" v-if="source.proxyLevel === 1 " style="font-size: 14px;">
         总代理
      </div>
           <div class="weui-flex__item" v-else-if="source.proxyLevel === 2 " style="font-size: 14px;">
         一级代理
      </div>
            <div class="weui-flex__item" v-else-if="source.proxyLevel === 0 " style="font-size: 14px;">
        普通用户
      </div>
           <div class="weui-flex__item" v-else-if="source.proxyLevel === 3 " style="font-size: 14px;">
        二级代理
      </div>
      <div class="weui-flex__item">
        <p class="info-grey">{{source.salesCount}}</p>
      </div>
    </div>

    <div class="no-data" v-show="showNoData">暂无数据</div>

    <div class="weui-loadmore" v-show="loading">
      <i class="weui-loading"></i>
      <span class="weui-loadmore__tips">正在加载</span>
    </div>
 </div>
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions } from 'Vuex'
export default {
  data() {
    return {
      listTitle: ['头像', '昵称/ID', '上级ID', '等级', '上月销量'],
      listData: [],
      active: true,
      showEdit: false,
      modCrowdName: '',
      modNotice: '',
      modCrowdHead: '',
      modCrowdQr: '',
      contentHeight: 0,
      loadHeadSuc: false,
      loadQrSuc: false,
      headBlob: undefined,
      qrBlob: undefined,
      loading: false,
      uid: '',
      limit: 15,
      offset: 0,
      totalCount: 0,
      noMore: false,
      // showNoData: false,
      showHeadList: '',
    }
  },
  mounted() {
    // this.haha()
    this.initInfinite()
    this.queryGroupInfo()
    this.$nextTick(function() {
    this.getShow()

    })
    this.showHead()
    this.contentHeight = document.body.offsetHeight - 136
    // if (!this.user.role) {
    //   this.api.homePage.getTeamAndPlayers().then(res => res.json()).then(data => {
    //     if (data.errorCode) {
    //       return
    //     }
    //     this.changeUser({ user: data.source.user })
    //     console.log('haha', this.user.uid)
    //     this.uid = this.user.uid
    //     console.log('uid2', this.uid)
    //     // this.getShow()
    //   })
    // }
  },
  methods: {
    ...mapMutations(['setMyGroupInfo', 'changeUser']),
    ...mapActions(['queryGroupInfo']),
    toggleEdit() {
      this.showEdit = !this.showEdit
      if (this.showEdit) {
        this.modCrowdName = this.myGroupInfo.crowdName
        this.modNotice = this.myGroupInfo.notice
        this.modCrowdHead = this.myGroupInfo.crowdHead
        this.modCrowdQr = this.myGroupInfo.crowdQr
      }
    },
    initInfinite() {
      const listHeight = document.body.offsetHeight - 70 + 'px'
      Object.assign(this.$refs.list.style, { height: listHeight, 'overflow-y': 'auto' })
      $(this.$refs.list).infinite().on('infinite', () => {
        if (this.loading) {
          return
        }
        this.offset += this.limit
        this.getShow()
      });
    },
    getShow() {
      const send = {
        // limit: this.limit,
        limit: this.limit + '',
        offset: this.offset
      }
      this.loading = true
      this.api.agentRun.getShow(send).then(res => res.json()).then(data => {
        this.loading = false
        console.log('showRunRun', data.data.dataList)
        console.log('showRunCount', this.totalCount)
        if (data.data.dataList !== null) {
          console.log('showRunRun', data.data.dataList)
          this.totalCount = data.data.totalCount
          this.listData = this.listData.concat(data.data.dataList)
        } else {
          $(this.$refs.list).destroyInfinite()
          // this.showNoData = true
        }
        // }
      })
    },
    showHead() {
      const send = {
      }
      this.api.agentRun.getShowHead(send).then(res => res.json()).then(data => {
        console.log('head', data)
        this.showHeadList = data.data.dataList[0]
      })
    },
    getImgData(file) {
      return new Promise((resolve, reject) => {
        // 创建读取文件的对象
        const reader = new FileReader()
        // 创建文件读取相关的变量
        let imgFile
        // 为文件读取成功设置事件
        reader.onload = function(e) {
          imgFile = e.target.result
          resolve(imgFile)
          // const blobData = window.util.dataURLtoBlob(imgFile)
          // const dataUrl = window.util.blobToDataURL(blobData, function(result) {
          //   console.log(result);
          // })
        }
        // 正式读取文件
        reader.readAsDataURL(file)
      })
    },
    loadHead() {
      if (this.$refs.imageIptHead.files.length === 0) {
        return Promise.resolve()
      }
      const file = this.$refs.imageIptHead.files[0]
      return this.getImgData(file)
    },
    loadQr() {
      if (this.$refs.imageIptQr.files.length === 0) {
        return Promise.resolve()
      }
      // 获取文件
      const file = this.$refs.imageIptQr.files[0]
      return this.getImgData(file)
    },
  },
  computed: {
    ...mapState(['api', 'token', 'areaCode', 'user', 'myGroupInfo', 'ruleList']),
    listStyle() {
      const maxHeight = this.showEdit ? this.contentHeight + 65 : this.contentHeight
      return {
        maxHeight: maxHeight + 'px',
        'overflow-y': 'auto'
      }
    },
    showNoData() {
      return !this.listData.length && !this.loading
    }
  },
  components: {
  }
}

</script>

<style lang="less">
@group-label-height:70px;
@group-padding: 5px;
.label-img {
  height: @group-label-height - 2 * @group-padding;
  float: left;
  border-radius: 5px;
}
.group-label {
  // height: @group-label-height;
  padding: @group-padding 10px;
  // background: linear-gradient(to bottom, #f5f5f5,#cfcfcf);
  // &>.label-img {
  //   height: @group-label-height - 2 * @group-padding;
  //   float: left;
  // }
  &>.info {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding-left: 5px;
    // padding-right:
    &>p {
      flex: 1;
      margin: 0;
    }
  }
  // >.arrow-block {
  //   line-height: 60px;
  //   float: right;
  // }
  // .arrow-down {
  //   width: 20px;
  // }
  // .arrow-up {
  //   width: 20px;
  // }
}
// .group-list {
//   padding: 0;
//   margin: 0;
//   display: none;
//   &.active {
//     display: block;
//   }
//   &>li {
//     list-style: none;
//     background: #fff;
//     // height: @group-label-height - 5px;
//     margin-bottom: 5px;
//     padding: @group-padding 10px;
//     &>.label-img {
//       .label-img();
//       // height: @group-label-height - 5px - 2 * @group-padding;
//       // float: left;
//       // border-radius: 5px;
//     }
//     &>.info {
//       display: flex;
//       flex-direction: column;
//       height: 100%;
//       padding-left: 5px;
//       &>p {
//         flex: 1;
//         margin: 0;
//       }
//     }
//   }
// }
// .group-bottom {
//   position: absolute;
//   bottom: 0;
//   height: 66px;
//   width: 100%;
//   &>a {
//     width: 80%;
//     margin: auto;
//   }
// }

// .weui-btn_blue {
//   background-color: #33b0ff;
// }

// .waiting-room {
//   // position: absolute;
//   // right: 5px;
//   float: right;
// }

// .text-center {
//   text-align: center;
// }

// .crowd-qr {
//   margin: auto;
//   width: 200px;
// }

// .crowd-head {
//   margin: auto;
//   width: 60px;
// }

// .text-left {
//   text-align: left !important;
// }
.weui-cell .weui-flex__item{
  // p{
  //   color: red;
  //   font-size: 20px;
  // }
  font-size: 16px;
}
</style>